<template>
	<uni-popup ref="popupRef" type="bottom" :safe-area="false">
		<view class="main">
			<image class="close" src="@/static/close.png" mode="aspectFill" style="width: 34rpx;height: 34rpx;"></image>
			<view class="title">
				创建心愿
			</view>
			<view class="content">
				<view class="box">
					<view class="box-icon">
						
					</view>
					<view class="box-info">
						<view class="box-info-name">
							签到任务
						</view>
						<view class="box-info-spec">
							连续签到<text>7</text>天可领取，<text>70000</text>心愿值
						</view>
					</view>
					<view class="box-btn">
						去签到
					</view>
				</view>
				<view class="box">
					<view class="box-icon">
						
					</view>
					<view class="box-info">
						<view class="box-info-name">
							助力任务
						</view>
						<view class="box-info-spec">
							完成助力<text>10</text>次可领取心愿值
						</view>
					</view>
					<view class="box-btn">
						去助力
					</view>
				</view>
				<view class="box">
					<view class="box-icon">
						
					</view>
					<view class="box-info">
						<view class="box-info-name">
							学习任务
						</view>
						<view class="box-info-spec">
							学习商机，最高可获得<text>300</text>万心愿值奖励
						</view>
					</view>
					<view class="box-btn">
						去学习
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="btn-item">
					去福利中心》
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	const popupRef = ref(null)
	const close = () => {
		popupRef.value.close()
	}
	const open = () => {
		popupRef.value.open()
	}
	defineExpose({
		close,
		open
	})
	const onWish = ()=>{
		uni.navigateTo({
			url:'/packages/wish/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 22rpx;
		margin-bottom: 16rpx;
		&-icon{
			width: 84rpx;
			height: 84rpx;
			background: #FFC05E;
			border-radius: 100%;
			margin-right: 20rpx;
		}
		&-info{
			flex: 1;
			&-name{
				font-weight: 400;
				font-size: 32rpx;
				color: #6F1515;
				margin-bottom: 22rpx;
			}
			&-spec{
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 24rpx;
				&>text{
					color: #F04E2A;
				}
			}
		}
		&-btn{
			width: 110rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: #F04E2A;
			border-radius: 200rpx;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.btn{
		padding-bottom: Max(constant(safe-area-inset-bottom), 30rpx);
		padding-bottom: Max(env(safe-area-inset-bottom), 30rpx);
		&-item{
			border-radius: 200rpx;
			border: 2rpx solid #F04E2A;
			font-weight: 400;
			font-size: 36rpx;
			color: #F04E2A;
			box-sizing: border-box;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
		}
		
		
	}
	.close{
		position: absolute;
		top: 54rpx;
		right: 34rpx;
	}
	.main{
		padding: 0 24rpx;
		background: linear-gradient( 180deg, #FFE6E0 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
	}
	.title{
		font-weight: 400;
		font-size: 36rpx;
		color: #6F1515;
		text-align: center;
		padding: 58rpx 0;
	}
	.content{

	}
	.btn{
		
	}
</style>